<nz-card class="m-b-2">
  <!-- seach START -->
  <div class="zdy-seach-wrap">
    <div class="operation-btns">
      <button nz-button nzType="primary" (click)="isVisible = true">手动调节</button>
    </div>

    <div nz-space class="seach-content">
      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">发生时间</label>
        <div class="seach-control">
          <nz-range-picker
            nzFormat="yyyy-MM-dd"
            [(ngModel)]="dateArrs"
            (ngModelChange)="dateChange($event)">
          </nz-range-picker>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">来源</label>
        <div class="seach-control">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzPlaceHolder="请选择"
            [(ngModel)]="sourceSelected"
            (ngModelChange)="sourceChange($event)">
            <nz-option
              *ngFor="let item of sourceLists"
              [nzLabel]="item.name"
              [nzValue]="item.content">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">操作人</label>
        <div class="seach-control">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="请选择"
            [(ngModel)]="seachForms.createUser">
            <nz-option nzLabel="系统" nzValue="root"></nz-option>
            <nz-option nzLabel="人工" nzValue="notRoot"></nz-option>
          </nz-select>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">用户</label>
        <div class="seach-control">
          <input nz-input placeholder="请输入ID/姓名/联系方式" [(ngModel)]="seachForms.user" />
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <button
          *ngIf="permission.userPermission.has('customer:memberIntegral:adjust')"
          nz-button
          nzType="primary"
          class="m-r-8"
          (click)="searchData()">
          查询
        </button>
        <button
          *ngIf="permission.userPermission.has('customer:memberIntegral:adjust')"
          nz-button
          (click)="resetData()">
          重置
        </button>
      </div>
    </div>
  </div>
  <!-- seach END -->
</nz-card>

<nz-card>
  <main class="pagination-wrap-position">
    <!-- Table -->
    <div class="table-wrap">
      <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableForms.tableLoading"
        [nzData]="tableData"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="tableForms.total"
        [nzPageIndex]="tableForms.page"
        [nzPageSize]="tableForms.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
      >
        <thead>
          <tr>
            <th nzAlign="center" nzWidth="150px">ID</th>
            <th nzAlign="center" nzWidth="150px">分值</th>
            <th nzAlign="center" nzWidth="180px">来源</th>
            <th nzAlign="center" nzWidth="170px">操作人</th>
            <th nzAlign="center">发生时间</th>
            <th nzAlign="center" nzWidth="170px">关联ID</th>
            <th nzAlign="center">备注</th>
          </tr>
        </thead>
  
        <tbody>
          <tr
            *ngFor="let data of basicTable.data" [ngClass]="{'bg-pink': data.createUser != 'root'}"
            nz-tooltip
            [nzTooltipTitle]="data.createUser != 'root' ? '人工调节' : ''">
            <td nzAlign="center">{{ data.userId }}</td>
            <td nzAlign="center">
              <span [ngStyle]="{'color': data.integralChange | scoreStatus: {type: 'color', changeType: data.changeType}}">
                {{ data.integralChange | scoreStatus: {type: 'text', changeType: data.changeType} }}
              </span>
            </td>
            <td nzAlign="center">
              {{ getSourceText(data.source) }}
            </td>
            <td nzAlign="center">
              {{ data.createUser | growupStatus }}
            </td>
            <td nzAlign="center">{{ data.createTime || '-' }}</td>
            <td nzAlign="center">{{ (data.businessId || data.businessId == 0) ? data.businessId : '-' }}</td>
            <td nzAlign="center">{{ data.bak || '-' }}</td>
          </tr>
        </tbody>
      </nz-table>
  
      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
    </div>
  
  </main>
</nz-card>

<!-- model START -->
<nz-modal
    nzClassName="custom-model-wrap"
    [nzWidth]="500"
    [(nzVisible)]="isVisible"
    nzTitle="手动调节"
    [nzFooter]="null"
    (nzOnCancel)="handleCancel()"
    (nzAfterOpen)="openModel($event)"
    (nzAfterClose)="closeModel($event)">

    <div *nzModalContent>
      <div class="custom-model-body">
        <form nz-form [formGroup]="validateForm">
          <!-- 用户ID -->
          <nz-form-item>
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzRequired
              nzFor="userId"
              class="label-sp">
              用户ID
            </nz-form-label>
  
            <nz-form-control
              [nzSm]="14"
              [nzXs]="24"
              nzErrorTip="请输入用户ID">
              <input
                nz-input
                formControlName="userId"
                id="userId"
                placeholder="请输入用户ID"
              />
            </nz-form-control>
          </nz-form-item>
  
          <!-- 分值 -->
          <nz-form-item>
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzRequired
              nzFor="integralChange"
              class="label-sp">
              分值
            </nz-form-label>
  
            <nz-form-control
              [nzSm]="14"
              [nzXs]="24"
              nzErrorTip="请输入分值">
              <nz-input-number
                style="width: 160px;"
                formControlName="integralChange"
                id="integralChange"
                [nzStep]="1"
                nzPlaceHolder="减扣得话输入负数"
                [nzPrecision]="0">
              </nz-input-number>
            </nz-form-control>
          </nz-form-item>
  
          <!-- 关联ID -->
          <nz-form-item>
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzFor="businessId"
              class="label-sp">
              关联ID
            </nz-form-label>
  
            <nz-form-control
              [nzSm]="14"
              [nzXs]="24">
              <input
                nz-input
                formControlName="businessId"
                id="businessId"
                maxlength="20"
                placeholder="例如订单ID"
              />
            </nz-form-control>
          </nz-form-item>
  
          <!-- 备注 -->
          <nz-form-item>
            <nz-form-label
              [nzSm]="6"
              [nzXs]="24"
              nzRequired
              nzFor="bak"
              class="label-sp">
              备注
            </nz-form-label>
  
            <nz-form-control
              [nzSm]="14"
              [nzXs]="24"
              nzErrorTip="请输入备注">
              <nz-textarea-count
                [nzMaxCharacterCount]="100">
                <textarea
                  rows="4"
                  formControlName="bak"
                  id="bak"
                  nz-input
                  placeholder="请输入备注"
                  maxlength="100">
                </textarea>
              </nz-textarea-count>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>
      
      <div class="custom-model-foot">
        <div class="custom-foot-cont">
          <button nz-button nzType="default" (click)="handleCancel()">取消</button>
          <button nz-button nzType="primary" (click)="handleOk()">确认</button>
        </div>
      </div>
    </div>
</nz-modal>
<!-- model END -->
